<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>The Jquery Ajax 01 Page</h1>
    <button onclick="doAjax()">$.ajax(...)</button>
    <button onclick="doGet()">$.get(...)</button>
    <button onclick="doPost()">$.post(...)</button>
    <button onclick="doLoad()">$.load("...")</button>
</div>
<div id="result">

</div>
<script src="/js/jquery.min.js"></script>
<script>
    function doLoad(){
        let requestUrl="/doAjaxGet";
        //load函数会在指定位置通过ajax方法加载数据,并将数据更新到这个位置
        $("#result").load(requestUrl,function(){//可选
            console.log("==load complete==");//加载完成以后执行
        });
    }
    function doPost(){
        let requestUrl="/doAjaxPost";
        let params="id=104&city=shijiazhuang";
        $.post(requestUrl,params,function(result){
            alert(result);
        })
    }
    function doGet(){
        let requestUrl="/doAjaxGet";
        let params="";
        $.get(requestUrl,params,function(result){
            $("#result").html(result);
        },"text");//默认为json
    }
    function doAjax(){
        let requestUrl="/doAjaxGet";
        let params="";
        //$符号在这里代表jquery对象
        //ajax({})为jquery种的一个ajax函数,底层封装了ajax请求过程
        $.ajax({
            url:requestUrl,//key必须为url
            data:params,
            //type:"GET",//可以省略,默认为Get请求
            dataType:"text",//服务端响应到客户端的数据格式,默认为json
            //async:true,//默认异步
            //contentType:"application/json",//假如需要向服务端传递json串
            success:function(result){//callback 回调函数
                console.log("result",result);
                //JS原生写法
                //document.querySelector("#result").innerHTML=result;
                //Jquery种的封装简化写法
                $("#result").html(result);
            }
        });
        //假如服务端响应到客户端的数据为json格式字符串,底层会默认将其转换为json对象
    }
</script>
</body>
</html>